<template>
  <div class="tree-chat-content">
    <headerComponent>
      <template v-slot:title>组织目录</template>
      <template v-slot:rnum>{{ checkedKeys.length || 0 }}</template>
      <template v-slot:runit>个</template>
    </headerComponent>
    <div class="l-list">
      <!-- <div class="tab-box">
        <div
          class="tab-item"
          @click="selectTab('area')"
          :class="{ active: currentTab == 'area' }"
        >
          社区目录
        </div>
        <div
          class="tab-item"
          @click="selectTab('sence')"
          :class="{ active: currentTab == 'sence' }"
        >
          场景目录
        </div>
      </div> -->
      <div class="tab-box">
        <div
          class="tab-item"
          @click="selectTab('area')"
          :class="{ active: currentTab == 'area' }"
        >
          组织目录
        </div>
        <div
          class="tab-item"
          @click="selectTab('sence')"
          :class="{ active: currentTab == 'sence' }"
        >
          场景目录
        </div>
      </div>
      <div class="tree-box">
        <el-tree
          v-if="currentTab == 'area'"
          ref="treeRef"
          class="tree-select"
          @check="checkTree"
          :data="treeData"
          show-checkbox
          node-key="nodeId"
          highlight-current
          :props="defaultProps"
        />
        <el-tree
          v-if="currentTab == 'sence'"
          ref="treeRef"
          class="tree-select"
          @check="checkTree"
          :data="treeData"
          show-checkbox
          node-key="nodeId"
          highlight-current
          :props="defaultProps"
        />
      </div>
    </div>
    <!-- <div class="panelbtn" @click="emitData">视频上屏</div> -->
  </div>
</template>
<script setup>
import { defineAsyncComponent, onMounted } from "vue";
const headerComponent = defineAsyncComponent(() =>
  import("@/components/ar/header.vue")
);
import { getPointTree } from "@/api/ar.js";
import { getSencePointList } from "@/api/chat.js";
const emit = defineEmits(["selectNode"]);

const defaultProps = {
  children: "childrens",
  label: function (data, node) {
    return data.nodeName;
  },
};

let treeData = ref([]);

const getData = async () => {
  try {
    if (currentTab.value == "sence") {
      let { data } = await getSencePointList({});
      treeData.value = data.treeNodeList;
    } else {
      let { data } = await getPointTree({});
      treeData.value = data.deviceOrgTree;
    }
  } catch (e) {
    console.error(e);
  }
};

let checkedKeys = ref([]);
let timer = null;
const checkTree = (data, node) => {
  // console.log(data, node);
  let list = [];
  node.checkedNodes.map((item) => {
    if (item.tag.indexOf("org") > -1 || !item.tag) {
    } else {
      list.push(item.tag);
    }
  });
  checkedKeys.value = list;
  if (timer) {
    clearTimeout(timer);
    timer = null;
  } else {
    timer = setTimeout(() => {
      emit("selectNode", checkedKeys.value);
      clearTimeout(timer);
      timer = null;
    }, 1000);
  }
};

const emitData = () => {
  emit("selectNode", checkedKeys.value);
};

let currentTab = ref("area");
const selectTab = (type) => {
  currentTab.value = type;
  // checkedKeys.value = []
  getData();
};

onMounted(() => {
  getData();
});

onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.tree-chat-content {
  width: 900px;
  height: 100%;
  margin-left: 40px;
  //   border: 1px solid red;
  .l-list {
    margin-top: 14px;
    width: 100%;
    // height: calc(100% - 184px);
    height: calc(100% - 84px);
    overflow: auto;
    background: linear-gradient(
      270deg,
      rgba(13, 127, 232, 0.25) 0%,
      rgba(13, 127, 232, 0.4) 100%
    );
    padding: 24px 0 62px 0;
  }
  .tree-box {
    width: 100%;
    // height: calc(100% - 184px);
    height: calc(100% - 84px);
    overflow: auto;
  }
  .panelbtn {
    width: 100%;
    height: 80px;
    margin-top: 20px;
    text-align: center;
    line-height: 80px;
    color: #fff;
    font-size: 28px;
    background: linear-gradient(180deg, #33c6f0 0%, #2ba0ff 100%);
    border-radius: 12px;
    cursor: pointer;
  }
}
</style>

<style lang="scss">
.is-checked {
  .el-tree-node__content {
    .el-tree-node__label {
      color: #27c8ff !important;
    }
  }
}
.el-checkbox {
  &.is-checked {
    .el-checkbox__inner {
      width: 30px !important;
      height: 30px !important;
      background: url("@/assets/images/video/checked.png") no-repeat !important;
      background-size: 100% 100% !important;
      &::after {
        display: none;
        content: "";
        opacity: 0 !important;
      }
      &::before {
        display: none;
        content: "";
        opacity: 0 !important;
      }
    }
  }
  .el-checkbox__inner {
    width: 30px !important;
    height: 30px !important;
    background: url("@/assets/images/video/checkn.png") no-repeat !important;
    background-size: 100% 100% !important;
    &::after {
      display: none;
      content: "";
      opacity: 0 !important;
    }
    &::before {
      display: none;
      content: "";
      opacity: 0 !important;
    }
  }
}
.is-checked {
  .el-tree-node__content {
    background: url("@/assets/images/video/treebg.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
}
.el-tree-node__content:hover {
  background: url("@/assets/images/video/treebg.png") no-repeat !important;
  background-size: 100% 100% !important;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: url("@/assets/images/video/treebg.png") no-repeat !important;
  background-size: 100% 100% !important;
}
.el-tree-node:focus > .el-tree-node__content {
  background: url("@/assets/images/video/treebg.png") no-repeat !important;
  background-size: 100% 100% !important;
}
.tree-select {
  background: transparent;
  .el-icon {
    font-size: 40px !important;
    color: #fff !important;
  }
  .el-tree-node {
    &.is-current {
      background: transparent !important;
    }
    .el-tree-node__content {
      height: 60px;
    }
  }
  .el-tree-node__label {
    color: #ffffff;
    font-size: 25px;
    line-height: 60px;
  }
}
.tab-box {
  margin-left: 24px;
  margin-bottom: 24px;
  cursor: pointer;
  width: 410px;
  height: 47px;
  background: url("@/assets/images/ar/tabbg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 4px;
  margin-top: 19px;
  .tab-item {
    width: 50%;
    font-family: YouSheBiaoTiHei;
    font-size: 23px;
    color: #ffffff;
    line-height: 50px;
    letter-spacing: 1.5px;
    text-align: center;
    &.active {
      background: url("@/assets/images/ar/tabactive.png");
      background-size: 100% 100%;
    }
  }
}
// .tab-box {
//   cursor: pointer;
//   width: 448px;
//   height: 64px;
//   display: flex;
//   align-items: center;
//   margin-bottom: 24px;
//   margin-left: 24px;
//   .tab-item {
//     width: 50%;
//     font-size: 28px;
//     color: #2263bf;
//     line-height: 64px;
//     text-align: center;
//     background: #ffffff;
//     box-shadow: 0px 0px 5px 0px rgba(70, 102, 149, 0.12);
//     &.active {
//       color: #fff;
//       background: #2263bf;
//       border-radius: 6px 0px 0px 6px;
//       border-radius: 6px;
//       border: 1px solid rgba(34, 99, 191, 0.09);
//     }
//   }
// }
</style>
